<template>
    <div>
        <div v-title>账户明细</div>
        <van-loading type="spinner" color="black" style="margin:54px auto" v-show="showLoading" />
        <ul class="accountList" v-waterfall-lower="loadMore" waterfall-disabled="disabled" waterfall-offset="100" v-show="!showLoading">
            <li v-for="item in datalist">
                <div class="FlexDIV">
                    <div>
                        <span>{{item.Remark}}<span class="FromMemberAccount" v-if="item.Remark.indexOf('佣金收益')!=-1">({{item.FromMemberAccount.slice(0,3)}}****{{item.FromMemberAccount.slice(7,11)}})</span></span>
                        <span v-if="item.UpdataMoney>0">+{{item.UpdataMoney}}元</span>
                        <span v-else>{{item.UpdataMoney}}元</span>
                    </div>
                    <p>{{item.AddTime}}</p>
                </div>
            </li>
        </ul>
        <div class="nomore" v-show="this.nomore==0||showtime<10">暂无更多</div>
        <div class="nodata" v-show="showtime==0">
            <img src="../image/nodata.png">
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js';
import {
    Toast,
    Waterfall,
    Loading,
} from 'vant';
export default {
    components: {
        [Toast.name]: Toast,
        [Loading.name]: Loading,
    },
    directives: {
        WaterfallLower: Waterfall('lower'),
    },
    data() {
        return {
            datalist: '',
            showLoading: true,
            pages: 1,
            nomore: 0,
            showtime: '',
        }
    },
    mounted() {
        this.GetMoneyListByPage()
    },
    methods: {
        GetMoneyListByPage() {
            api.Post('Member/MemberInfo/GetMoneyListByPage', {TypeID:-1}).then(res => {
                this.datalist = res.rows
                this.showLoading = false;
                this.showtime = res.total
            })
        },
        //加载更多
        loadMore() {
            this.disabled = true;
            if (this.pages * 10 >= this.showtime) {
                this.nomore = 1
                this.disabled = false;
                return;
            }
            this.pages++;
            api.Post('Member/MemberInfo/GetMoneyListByPage', { rows: 10, page: this.pages,TypeID:-1 }).then(res => {
                setTimeout(() => {
                    for (var i = 0; i < res.rows.length; i++) {
                        this.datalist.push({
                            Remark: res.rows[i].Remark,
                            UpdataMoney: res.rows[i].UpdataMoney,
                            AddTime: res.rows[i].AddTime,
                        })
                    }
                });
                this.disabled = false;
            }, 200)
        },

    }
}
</script>
<style scoped>
.accountList {
    background: #fff;
}

.accountList li {
    width: 92%;
    margin: 0 auto;
    height: 60px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f1f5
}

.accountList li:last-child {
    border-bottom: none
}

.accountList li .FlexDIV {
    width: 100%;
}

.accountList li .FlexDIV div span:last-child {
    float: right
}

.accountList li .FlexDIV p {
    font-size: 12px;
    color: #999;
    margin: 5px 0 0 0;
    padding: 0
}

.nomore {
    font-size: 14px;
    text-align: center;
    margin: 20px 0px;
    color: #666
}
.FromMemberAccount{
    float: inherit !important;
}

.nodata {
    text-align: center;
    padding: 50px;
    padding-top: 30vw;
}

.nodata img {
    width: 45%;
}
</style>